/* -------------分类---------------------- */
.main-top{margin-top: 50px;margin-bottom: 65px;}
.main-top h2{font-size: 24px;color: #000;margin-bottom: 24px;}
.main-top button{box-sizing: border-box;padding: 5px 15px;background-color: #fff;border: 1px solid #ccc;border-radius: 10px;
margin-right: 5px;}
/* -------------------------全部------------------------ */
.api-catgray a{ float: left; cursor: pointer; user-select: none; padding: 6px 15px; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 10px; margin-right: 10px;}
.api-catgray a.active{ border-color: #00bdff; color: #00bdff;}
.api-catgray .strong{ font-weight: bold;}

.search-text{ width: 190px; height: 30px; border: none; padding-left: 15px; box-sizing: border-box;  background-color: #f4f4f4; border-radius: 15px 0 0 15px;}
.search-btn{ width: 40px; height: 30px; border: none; background:#f4f4f4 url('../imgs/magnifier.png') no-repeat center; border-radius: 0 15px 15px 0;}
.query-text{ line-height: 30px; margin-right: 20px; font-weight: bold;}

.api-list li{position: relative; overflow: hidden; float: left; text-align: center; padding-top: 50px; line-height: 24px; width: 228px; height: 270px; border: 1px solid #ccc; box-sizing: border-box;margin-bottom: 15px; margin-right: 15px;}
.api-list li:nth-child(5n){ margin-right: 0;}
.api-apply{position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; transition: all 300ms; bottom: -30px;  width: 190px; height: 30px; line-height: 30px; text-align: center; color: #fff; background-color: #00bdff; }

.enterprise{ position: absolute; display: none; width: 60px; height: 25px; background-color: #e5f8ff; color: #00bdff; left: 10px; top: 10px; text-align: left; }
.api-list .isShow{ display: block; }

.api-content{ transition: all 300ms;}
.api-list li .green{ color: #29c287;}
.api-list li .red{ color: #ff546b;}

.api-list li:hover .api-apply{ bottom: 20px; opacity: 1;}
.api-list li:hover .api-content{ transform: translateY(-10px); }


.search-text{ width: 190px; height: 30px; border: none; padding-left: 15px; box-sizing: border-box;  background-color: #f4f4f4; border-radius: 15px 0 0 15px;}
.search-btn{ width: 40px; height: 30px; border: none; background:#f4f4f4 url('../imgs/magnifier.png') no-repeat center; border-radius: 0 15px 15px 0;}

.query-text{ line-height: 30px; margin-right: 20px; font-weight: bold;}
.main li{border: 1px solid #ccc;width:228px ;height: 270px;float: left;margin-right: 15px;box-sizing: border-box;margin-top: 20px;text-align: center;padding-top: 55px; position: relative;}
.main li:nth-child(5n){margin-right: 0;}
.main li p{margin: 18px 0 12px 0;}
.main ul li span{width: 58px;height: 22px;background-color: #e5f8ff;color: #00bdff;position: absolute;top: 10px;left: 10px;   }

.main-foot li{height: 25px;text-align: center;line-height: 25px;float: left;margin-top: 55px;margin-bottom: 70px;margin-right: 20px;}
.main-foot li:nth-child(1){margin-left: 450px;width: 25px;height: 25px;background-color: #00bdff;border-radius: 20px;}
.main-foot li:nth-child(10){color: #00bdff;}


/* ---------------------蒙层------------------------ */
.men {background-color: rgba(0,0,0,.5) ; top: 0;left: 0;z-index: 1000;display: none;position: fixed;width: 100%;height: 100%; text-align: center;}
.men .box{  width: 400px;height: 550px;background-color: #fff;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;
}
.men .box .ims{margin-left: 50%; transform: translate(-50%);margin-top: 30px;}
 .men .box .te{font-size: 16px;margin-top: 40px;margin-bottom: 50px;cursor: pointer;text-align: center;}

 .men .box .te a{margin-left:62px;}
 .men .box .te a:nth-child(1){margin-left:0;}
 

 .men .box input{ height: 45px;width: 360px;border-top: none;border-left: none;border-right: none;border-color: #e7e7e7;}

 .men .box .text{box-sizing: border-box; top: 180px;left: 20px;padding-left: 30px;margin-bottom: 30px;}

 .men .box .pass{top: 280px;left: 20px;box-sizing: border-box;padding-left: 30px;}

 .jing{width: 27px;height: 27px;  background: url('../imgs/loginIcon.png')no-repeat;background-position: -54px 0;position: absolute;top: 197px;left: 21px;}
 .jin{display: inline-block; background: url('../imgs/loginIcon.png')no-repeat;width: 27px;height: 27px;position: absolute;right: 22px;bottom: 95px;background-position: -56px -29px;}
 .jin1{display: inline-block; background: url('../imgs/loginIcon.png')no-repeat;width: 27px;height: 27px;position: absolute;right: 190px;bottom: 75px;background-position: -56px -29px;}

 .lin{width: 27px;height: 27px;background: url('../imgs/loginIcon.png')no-repeat;background-position: -24px 0;position: absolute;top: 274px;left: 21px;}

 .men .box .blue{text-align: right;margin-right: 20px;font-size: 14px;margin: 20px 20px 20px 0;}
.men .box button{width: 360px;height: 45px;background-color: #00bdff;color: #fff;font-size: 16px;font-weight: bold;border: none;text-align: center;line-height: 22.5px;margin-bottom: 20px;}

.men .box .foot{text-align: right;margin-right: 20px;padding-right: 30px;}
.men .box .foot span{margin: 0;color: #00bdff;}
.login-box > div.on{display: block;}
.login-box >div{display: none;}

.men .box .max {width: 290px;height: 242px;border: 1px solid#ccc;margin: 0 auto;color: #000;}
 .box .right{display: none;}

.men .box .right img{width: 104px;height: 104px;margin-top: 36px;}

.men .box .foot1{text-align:left;padding-left: 30px;margin-left: 20px;margin-top: 20px;}
.men .box .foot1 span{margin-left: 0;}